首先，到Bootstrap官網的Documentation(Docs)裡，點選download，找到Bootstrap的CDN，複製下來貼到你編輯器
我這邊提供一個中文版網站：bootStrap
bootStrap必須依賴jquery.min.js的存在，所以js也是要一起下載的，jquery
把bootStrap的css、font、js、下載的jquery.min.js一併複製到專案下面，我這邊使用的是myelispe
再來需要設定jsp的頁面，請記得前後順序需正確，否則會導致頁面無法正常執行。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--這個lang="zh-CN"是轉化為html5的版本 -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<title>學習bootstrap案例</title>
<!-- 這個是自適應各種解析度的螢幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
bootstrap可以隨時適用別人設計好的功能，只需要熟悉就可以直接使用喔！
例如，開啟樣式表bootstrap.css，可以看到如下.btn-primary 顯而易見這是一個按鈕樣式
border-color: #ccc;
}
.btn-default .badge {
color: #fff;
background-color:#333;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focusp {
color: #fff;
background-color: #286090;
border-color: #122640;
}
.btn-primary:hover {
color: #fff;
background-color: #286090;
在jsp頁面寫上
<body>
<button class="btn-primary">按鈕</button>
</body>
呈現出的效果會是
重新整理頁面後，將會看到一個藍色的按鈕。不需要自己寫一行 CSS 程式碼，只要在頁面裡面給某個元素指定一個 class ，就可以直接顯示出預定的樣式—。
iThome鐵人賽
看影片追技術